<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>抽奖</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
        #lottery-wrap{
    position: relative;
	display: block;
	margin: 20px auto;
	width: 300px;
    border: 8px solid #eac34c;
    border-radius: 50%;
    box-shadow: 3px 0 3px #fffdc9, 0px 3px 3px #fffdc9, -3px 0 3px #fffdc9, 0px -3px 3px #fffdc9;
}
canvas{
    display: block;
}

#lottery-handler{
    position: absolute;
    z-index: 2;
    width: 60px;
    height: 74px;
    left: 50%;
    top: 50%;
    margin: -44px 0 0 -30px;
    background: url(../../image/handler.png) no-repeat 50%;
    background-size: contain;
}
#lottery-handler1{
    position: absolute;
    z-index: 3;
    width: 60px;
    height: 74px;
    left: 50%;
    top: 50%;
    margin: -44px 0 0 -30px;
    background: url(../../image/handler.png) no-repeat 50%;
    background-size: contain;
}
#lottery-handler2{
    position: absolute;
    z-index: 4;
    width: 60px;
    height: 74px;
    left: 50%;
    top: 50%;
    margin: -44px 0 0 -30px;
    background: url(../../image/handler.png) no-repeat 50%;
    background-size: contain;
}
.container{
    background: url(../../image/b40.png) no-repeat 100% 100%;
    background-size: 100%;
    height: 100%;
}
    </style>
</head>
<body>
    <div id="blank" class="header">
        <div id="back" v-back.tapmode class="back"></div>
        <span class="title">抽奖</span>
    </div>
<div id="app" class="container" style="margin-top: 60px;" > 
    <div id="lottery-wrap">
        <div id="lotteinfo">
        <div id="lottery-handler" v-show="sataccount>0&&balance>=1"></div>
        <div id="lottery-handler1" v-show="sataccount<=0&&balance >= 1" v-myclick="setcomplete"></div>
        <div id="lottery-handler2" v-show="balance < 1" v-myclick="widthbalance"></div>
    </div>
        <canvas width="300" height="300" id="lottery"></canvas>
    </div>
    <div v-cloak id="awardinfo" style="text-align: center;margin-top: 10px;color: #fff;">
        <div>今日剩余抽奖次数:{{awardaccount}}</div>
        <div v-myclick="getad" style="background: rgba(255,255,255,0.5);width: 100px;margin: 0 auto;padding:5px;margin-top: 20px;border-radius: 4px;">点击增加次数</div>
    </div>
    <div style="color: #fff;font-size: 13px;padding-left: 10px;margin-top: 20px;">1：用户每日观看广告可增加抽奖次数，每日五次机会</div>
    <div style="color: #fff;font-size: 13px;padding-left: 10px;margin-top: 10px;">2：每次抽奖将消耗一个CC</div>

</div>
</body>
<script src="../../script/vue.js"></script>
<script src="../../script/api.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script src="../../script/lottery.js"></script>

<script>

    var infos,
    awardaccount,
    balance,
    products,
    _index=0,
    vn,
        vm;

    apiready = function () {
        showProgress();
        setBSImg();
        new Vue({
            el: '#blank'
        });
        var sigmobAds = api.require('sigmobAds');
		sigmobAds.initSdk({
			userId:getPrefs('member_id'),
		},function(ret, err) {
			if (ret.status) {
				console.log("sdk 初始化成功");
			} else {
				console.log('sdk 初始化失败');
			}
		});
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback2 = function (ret) {
            var awardaccount = ret.content.account;
            var adaccount = ret.content.adaccount;
            var awardlist = ret.awardlist;
            var balance = ret.balance;
            console.log(JSON.stringify(ret));
             products = awardlist;
            // if(awardaccount>0){
            //     vn.sataccount =awardaccount;
            // }
            // vn.balance = balance;
            inittop(awardaccount,balance);
            new Lottery(document.getElementById('lottery'), {
                handler: document.getElementById('lottery-handler'),
                handlerCallback: function(_interface){
                    /*ajax获取中奖结果*/
                    _ajax(function(response){
                        vm.awardaccount--;
                        vn.balance--;
                        vn.sataccount--;
                        /*指定停止的位置:索引*/
                        _interface.stop(response.index, function(){
                            api.sendEvent({
                                    name : 'upduser',
                                });
                                vn.balance+=response.amount;
                            alert('恭喜你中得:' + response.name)
                        });
                    });
                },
                images: {
                    width: 30,
                    height: 30,
                    y: '88%',
                },
                products: products
            });
            $api.css($api.dom("body"), 'height:'+(api.winHeight-60)+'px');
                initApp(awardaccount,adaccount);
                api.parseTapmode();
            };
        pinet.post(URL.getawardinfo, data, callback2);
        function _ajax(callback){
            var data = {
            member_id: getPrefs('member_id')
        };
        var callback1 = function (ret) {
             _index = ret.content;
            setTimeout(function(){
		var response = {id: 1, name: products[_index].name, index: _index,amount:ret.amount};
		callback && callback(response);
	}, 100);
        };
        pinet.post(URL.getindex, data, callback1);

}

        // setRefreshHeaderInfo(refresh);
    };

    function inittop(sataccount,balance){
        vn = new Vue({
            el: "#lotteinfo",
            data: {
                BSImg: Vue.BSImg,
                sataccount:sataccount,
                balance:balance,
                key:0
            },
            methods: {
                setcomplete:function(){
                    if(vm.adaccount>=5){
                        alert('今日次数已用完，记得明日继续来哦！')
                    }else{
                        alert('观看广告可增加抽奖次数')
                    }
                },
                widthbalance:function(){
                    alert('CC余额不足');
                },
            },
        })
    }

    function initApp(awardaccount,adaccount,balance) {
        vm = new Vue({
            el: "#awardinfo",
            data: {
                awardaccount: awardaccount,
                BSImg: Vue.BSImg,
                adaccount:adaccount,
                key:0
            },
            methods: {
                setnewcount(){
                    var data = {
                        member_id: getPrefs('member_id')
                    };
                    var newcallback = function (ret) {

                    };
                    pinet.post(URL.setnewcount, data, newcallback);
                },
                getad:function(){
                    if(vm.adaccount>=5){
                        pinet.alert('今日观看次数已用完，记得明日继续来哦！');
                        return;
                    }
                    var items = ['f1138d8b22c','f1138dd181e'];
                    var item = items[Math.floor(Math.random()*items.length)];
					var sigmobAds = api.require('sigmobAds');
					sigmobAds.showRewardVideoAD({
						posId: item,
						// posId: "ebeec337910",ios
					}, function(ret, err) {
                        console.log(JSON.stringify(ret))
						
						if (ret.status) {
							if(ret.type == "onShow"){ //展示

							}

							if(ret.type == "onClosed"){ //关闭

							}
                            if(ret.type == "onCompleted"){ //关闭
                                if(vm.adaccount<5){
                                    vm.awardaccount++;
                                    vn.sataccount++;
                                    vm.adaccount++;
                                    vm.setnewcount()
                                }else{
                                    // pinet.alert('今日次数已用完，记得明日继续来哦！')
                                }
                                }
						} else {
                            vm.getad1();
                            // console.log(JSON.stringify(ret))
							// alert(JSON.stringify(err));
						}
					});
				},
                getad1(){
                    var sigmobAds = api.require('sigmobAds');
                    sigmobAds.showFullScreenVideoAD({
                        posId: "f1138996d7d",
                        // posId: "ebeec30739b",ios
                    }, function(ret, err) {
                        if (ret.status) {
                            if(ret.type == "onShow"){ //展示

                            }

                            if(ret.type == "onClosed"){ //关闭
                                if(vm.adaccount<5){
                                    vm.awardaccount++;
                                    vn.sataccount++;
                                    vm.adaccount++;
                                    vm.setnewcount()
                                }else{
                                    // pinet.alert('今日次数已用完，记得明日继续来哦！')
                                }
                            }
                        } else {
                            
                        }
                    });
                },
            },
        })
    }
</script>
</html>
